<template>
    <div class="Special">
        <div class="title">
            <div>
                <img src="../assets/img/i_icon_btbq.png" alt="" />
                <span>专题</span>
            </div>
            <a
                @click="
                    $router.push(
                        { path: '/Zhuanti' },
                        (onComplete) => {},
                        (onAbort) => {}
                    )
                "
                >查看更多</a
            >
        </div>

        <ul class="list">
            <li
                @click="
                    $router.push(
                        { path: '/ZhuantiDetail', query: { id: item.id } },
                        (onComplete) => {},
                        (onAbort) => {}
                    )
                "
                v-for="(item, index) in list"
                :key="index"
            >
                <h6>
                    <img :src="item.cover_image_url" alt="" />
                </h6>
                <h1>
                    {{ item.title }}
                </h1>
                <h3>
                    <h4 v-if="item.user">
                        <img
                            v-if="item.user"
                            :src="item.user.avatar_url"
                            alt=""
                        />
                        <span v-if="item.user">
                            {{ item.user.identity_name }}</span
                        >
                    </h4>
                    <h5>{{ item.created_at }}</h5>
                </h3>
            </li>
        </ul>
    </div>
</template>

<script>
import { axiosGet } from '../server/axios';
export default {
    name: 'SpeCial',
    props: {
        msg: String,
    },
    data() {
        return {
            list: [],
        };
    },
    mounted() {
        this.getList();
    },
    methods: {
        getList() {
            axiosGet(
                'api/subjects',
                {
                    page: 1,
                    limit: 2,
                },
                (res) => {
                    console.log(res);
                    if (res.code != 'ok') {
                        this.$notify({
                            title: '警告',
                            message: res.msg,
                            type: 'warning',
                        });
                    }

                    this.list = res.data.list;
                }
            );
        },
    },
};
</script>

<style scoped lang="scss">
.list {
    li {
        overflow: hidden;
        margin: 10px 0;
        cursor: pointer;
        box-shadow: 0 0 8px 4px #f5f5f5;
        h6 {
            width: 410px;
            max-height: 199px;
            overflow: hidden;

            img {
                width: 100%;
                transition: all 1s;
            }
        }

        h6:hover img {
            transform: scale(1.2);
        }

        h1 {
            font-size: 18px;
            font-family: Source Han Sans SC VF;
            font-weight: 400;
            color: #262626;
            padding: 17px 20px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            cursor: pointer;
        }

        h1:hover {
            color: #e60012;
        }
        h3 {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 20px 20px;

            h4 {
                display: flex;
                justify-content: flex-start;
                align-items: center;

                img {
                    width: 25px;
                    border-radius: 50%;
                }

                span {
                    font-size: 14px;
                    font-family: Source Han Sans SC VF;
                    font-weight: 400;
                    color: #262626;
                    margin-left: 5px;
                }
            }

            h5 {
                font-size: 14px;
                font-family: Source Han Sans SC VF;
                font-weight: 400;
                color: #a7a7a7;
            }
        }
    }
}
</style>
